<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Yeah</title>
		<link href="style.css" type="text/css" rel="stylesheet"/>
		<link href="input.css" type="text/css" rel="stylesheet"/>
	
		<script type='text/javascript' src='jquery.js'></script>
		<script type="text/javascript">
			var datefield = document.createElement("input")
			datefield.setAttribute("type", "date")
			if(datefield.type != "date") {//if browser doesn't support input type="date", load files for jQuery UI Date Picker
				document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
				document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
				document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
			}
		</script>
		<script>
			if(datefield.type != "date") {//if browser doesn't support input type="date", initialize date picker widget:
				jQuery(function($) {//on document.ready
					$('#travel1').datepicker();
					$('#travel2').datepicker();
				})
			}
		</script>
	<script type="text/javascript" charset="utf-8">
		var from = 0;
		var to = 0;
		var date1 = 0;
		var date2 = 0;
		var num = 0;
		var sum = 0;
		
		var step2_from = 0;
		var step2_to = 0;
		
		var step3_hotel = 0;
		
		function scroll(id) {
		

        // An offset to push the content down from the top.
        var offset = 20;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
		}
		
		function update1() {
			sum = from + to + date1 + date2 + num;
			if(sum >= 5)
			{
				document.getElementById("info1").innerHTML="Bra, tryck här eller scrolla";
				show('step2');
				show('step2info');	
				document.getElementById("info1").style.backgroundColor = '#1f0';
			}
			else
			{
				document.getElementById("info1").innerHTML="Fyll i kvarvarande " + (5 - sum) + " fält för att fortsätta.";
				document.getElementById("info1").style.backgroundColor = '#f10';			
			}
			
			var step1 = document.getElementById("step1text")
			step1.innerHTML = "";
			if(document.getElementById("from").value.length != 0) {
				step1.innerHTML += "Från: " + document.getElementById("from").value + "<br/>";
			}
			if(document.getElementById("destination").value.length != 0) {
				step1.innerHTML += "Till: " + document.getElementById("destination").value + "<br/>";
			}
			if(document.getElementById("travel1").value.length != 0) {
				step1.innerHTML += "Utresa: " + document.getElementById("travel1").value + "<br/>";
			}
			if(document.getElementById("travel2").value.length != 0) {
				step1.innerHTML += "Hemresa: " + document.getElementById("travel2").value + "<br/>";
			}
			if(document.getElementById("adults").value.length != 0) {
				step1.innerHTML += "Antal vuxna: " + document.getElementById("adults").value + "<br/>";
			}
			
		}
		
		function show(id) {
			document.getElementById(id).style.display = 'block';
		}
		
		$(document).ready(function(){
			//$("#adults").attr('disabled', true);
			update1();
			updateStep2();
			updateStep3(); 
			
			document.getElementById('step2').style.display = 'none';
			document.getElementById('step3').style.display = 'none';
			document.getElementById('step3').style.display = 'none';
			document.getElementById('step4').style.display = 'none';
			document.getElementById('step5').style.display = 'none';
			document.getElementById('step2info').style.display = 'none';
			document.getElementById('step3info').style.display = 'none';
			document.getElementById('step4info').style.display = 'none';
			
			$("#from").change(function(){
				from = 1;
				update1();
			})
			
			$("#destination").change(function(){
				to = 1;
				update1();
			})
			
			$("#travel1").change(function(){
				date1 = 1;
				update1();
			})
			
			$("#travel2").change(function(){
				date2 = 1;
				update1();
			})
			
			$("#adults").change(function(){
				num = 1;
				update1();
			})
			
			$("#adults").keydown(function(){
				num = 1;
				update1();
			})
			
    $('#info1').click(function(event) {
		if(sum >= 5)
			scroll("#step2");
    });
			
    $('#info2').click(function(event) {
		if(step2_to + step2_from >= 2) {
			scroll("#step3");
		}
    });
	
    $('#info3').click(function(event) {
		if(step3_hotel >= 1) {
			scroll("#step4");
		}
    });
	
    $('#info4').click(function(event) {
		scroll("#step5");
    });
	
    $('#step1info').click(function(event) {
		scroll("#step1");
    });
	
    $('#step2info').click(function(event) {
		scroll("#step2");
    });
	
    $('#step3info').click(function(event) {
		scroll("#step3");
    });
	
    $('#step4info').click(function(event) {
		scroll("#step4");
    });
	
    $('#plane1').click(function(event) {
		document.getElementById("plane1").style.borderColor = '#0b0';
		document.getElementById("plane1").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane2").style.borderColor = '#444';
		document.getElementById("plane2").style.backgroundColor = '#bbedef';
		
		step2_to = 1;
		updateStep2();
    });
	
    $('#plane2').click(function(event) {
		document.getElementById("plane2").style.borderColor = '#0b0';
		document.getElementById("plane2").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane1").style.borderColor = '#444';
		document.getElementById("plane1").style.backgroundColor = '#bbedef';
		
		step2_to = 1;
		updateStep2();
    });
	
    $('#plane3').click(function(event) {
		document.getElementById("plane3").style.borderColor = '#0b0';
		document.getElementById("plane3").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane4").style.borderColor = '#444';
		document.getElementById("plane4").style.backgroundColor = '#bbedef';
		
		step2_from = 1;
		updateStep2();
    });
	
    $('#plane4').click(function(event) {
		document.getElementById("plane4").style.borderColor = '#0b0';
		document.getElementById("plane4").style.backgroundColor = '#bbfddf';
				
		document.getElementById("plane3").style.borderColor = '#444';
		document.getElementById("plane3").style.backgroundColor = '#bbedef';
		
		step2_from = 1;
		updateStep2();
    });
	
	
	
		function updateStep2() {
			if(step2_to + step2_from >= 2) {
				document.getElementById("info2").style.backgroundColor = '#1f0';
				document.getElementById("info2").innerHTML="Bra, tryck här eller scrolla";
				show('step3');	
				show('step3info');			
			}
			else {
				document.getElementById("info2").style.backgroundColor = '#f10';
				document.getElementById("info2").innerHTML="";
				if(step2_to == 0)
					document.getElementById("info2").innerHTML+="Välj utresa<br/>";
				if(step2_from == 0)
					document.getElementById("info2").innerHTML+="Välj hemresa<br/>";
			}
		}
	
		function updateStep3() {
			if(step3_hotel >= 1) {
				document.getElementById("info3").style.backgroundColor = '#1f0';
				document.getElementById("info3").innerHTML="Bra, tryck här eller scrolla";
				show('step4');			
				show('step4info');	
				show('step5');			
			}
			else {
				document.getElementById("info3").style.backgroundColor = '#f10';
				document.getElementById("info3").innerHTML="Välj hotell";
			}
		}
		
		
	
    $('#hotel1').click(function(event) {
		document.getElementById("hotel1").style.borderColor = '#0b0';
		document.getElementById("hotel1").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel2").style.borderColor = '#444';
		document.getElementById("hotel2").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel3").style.borderColor = '#444';
		document.getElementById("hotel3").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
	
    $('#hotel2').click(function(event) {
		document.getElementById("hotel2").style.borderColor = '#0b0';
		document.getElementById("hotel2").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel1").style.borderColor = '#444';
		document.getElementById("hotel1").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel3").style.borderColor = '#444';
		document.getElementById("hotel3").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
	
	
    $('#hotel3').click(function(event) {
		document.getElementById("hotel3").style.borderColor = '#0b0';
		document.getElementById("hotel3").style.backgroundColor = '#bbfddf';
				
		document.getElementById("hotel2").style.borderColor = '#444';
		document.getElementById("hotel2").style.backgroundColor = '#cbddef';
		
		document.getElementById("hotel1").style.borderColor = '#444';
		document.getElementById("hotel1").style.backgroundColor = '#cbddef';
		
		step3_hotel = 1;
		updateStep3();
    });
	
	var e1 = 0,e2 = 0,e3 = 0,e4 = 0,e5 = 0;
	
    $('#extra1').click(function(event) {
		if(e1 == 0) {
			document.getElementById("extra1").style.borderColor = '#0b0';
			document.getElementById("extra1").style.backgroundColor = '#bbfddf';
			e1 = 1;
		}
		else {
			document.getElementById("extra1").style.borderColor = '#444';
			document.getElementById("extra1").style.backgroundColor = '#cbddef';	
			e1 = 0; 
		}
	});
    $('#extra2').click(function(event) {
		if(e2 == 0) {
			document.getElementById("extra2").style.borderColor = '#0b0';
			document.getElementById("extra2").style.backgroundColor = '#bbfddf';
			e2 = 1;
		}
		else {
			document.getElementById("extra2").style.borderColor = '#444';
			document.getElementById("extra2").style.backgroundColor = '#cbddef';	
			e2 = 0; 
		}
	});
    $('#extra3').click(function(event) {
		if(e3 == 0) {
			document.getElementById("extra3").style.borderColor = '#0b0';
			document.getElementById("extra3").style.backgroundColor = '#bbfddf';
			e3 = 1;
		}
		else {
			document.getElementById("extra3").style.borderColor = '#444';
			document.getElementById("extra3").style.backgroundColor = '#cbddef';	
			e3 = 0; 
		}
	});
    $('#extra4').click(function(event) {
		if(e4 == 0) {
			document.getElementById("extra4").style.borderColor = '#0b0';
			document.getElementById("extra4").style.backgroundColor = '#bbfddf';
			e4 = 1;
		}
		else {
			document.getElementById("extra4").style.borderColor = '#444';
			document.getElementById("extra4").style.backgroundColor = '#cbddef';	
			e4 = 0; 
		}
	});
    $('#extra5').click(function(event) {
		if(e5 == 0) {
			document.getElementById("extra5").style.borderColor = '#0b0';
			document.getElementById("extra5").style.backgroundColor = '#bbfddf';
			e5 = 1;
		}
		else {
			document.getElementById("extra5").style.borderColor = '#444';
			document.getElementById("extra5").style.backgroundColor = '#cbddef';	
			e5 = 0; 
		}
	});
	
		})
	</script>
	</head>
	<body>
	
		<div id="top" >
		
		</div>
		
		<div id="main" >
			<div id="step1" >
				<form>
					<fieldset id='field1'>
						<legend>
							Steg 1 - Avreseorter och datum
						</legend>
						
						<input type="text" id="from" name="from" required placeholder="Från" list="airports" />
						<input type="text" id="destination" name="destination" required placeholder="Till" list="airports"/>
						<input type="date" id="travel1" name="travel1" required placeholder="Avresedatum" />
						<input type="date" id="travel2" name="travel2" required placeholder="Hemresedatum" />
						<input type="number" id="adults" name="adults" required placeholder="Antal vuxna" min="1"/>
						
						
						<datalist id="airports">
							<option value="Stockholm">
							<option value="Oslo">
							<option value="Köpenhamn">
							<option value="London">
							<option value="Helsingfors">
						</datalist>
						
						
						<div id="info1">
						</div>
					</fieldset>
				</form>
			</div>
			
			<div id="step2" >
				<form>
					<fieldset>
						<legend>
							Steg 2 - Flyg
						</legend>
						
						Utresa
						<div id="plane1">
							Flygplan Plats1 - Plats2  tid1<br/>Mer info hejhej
						</div>
						
						<div id="plane2">
							Flygplan Plats1 - Plats2  tid2<br/>Mer info hejhej
						</div>
						
						Hemresa
						<div id="plane3">
							Flygplan Plats2 - Plats1  tid1<br/>Mer info hejhej
						</div>
						
						<div id="plane4">
							Flygplan Plats2 - Plats1  tid2<br/>Mer info hejhej
						</div>
				
						<div id="info2">
						</div>
					</fieldset>
					
				</form>
			</div>
			
			<div id="step3" >
					<fieldset>
						<legend>
							Steg 3 - Hotell
						</legend>
			
						Välj hotell
						<div id="hotel1">
							Hotell 1 - Med nice bild och shit och grejer<br/>Mer info hejhej
						</div>
						
						<div id="hotel2">
							Hotell 2 - Med nice bild och shit och grejer<br/>Mer info hejhej
						</div>
						
						<div id="hotel3">
							Hotell 3 - Med nice bild och shit och grejer<br/>Mer info hejhej
						</div>
						
						<div id="info3">
						</div>
					</fieldset>
			</div>
			
			<div id="step4" >
					<fieldset>
						<legend>
							Steg 4 - Tillval
						</legend>
			
						Tillval
						<div id="extra1">
							Bullar
						</div>
						<div id="extra2">
							Kakor
						</div>
						<div id="extra3">
							Bilar
						</div>
						<div id="extra4">
							Bussar
						</div>
						<div id="extra5">
							Knark
						</div>
						
						<div id="info4">
							Välj tillval eller tryck här för att fortsätta.
						</div>
					</fieldset>
			</div>
			
			
			<div id="step5" >
					<fieldset>
						<legend>
							Steg 5 - Sammanfattning
						</legend>
			
						Du har bokat:<br/>
						Blahblah<br/>
						blah<br/>
						ge personinfo
					</fieldset>
			</div>
		
		</div>
		
		<div id="summary" >
			<div id="step1info" >
			<b>1. Avreseorter och datum</b><br/>
			<a id="step1text"></a>
			</div>
			<div id="step2info" >
			<b>2. Flyg</b><br/>
			<a id="step2text">todo</a>
			</div>
			<div id="step3info" >
			<b>3. Hotell</b><br/>
			<a id="step3text">todo</a>
			</div>
			<div id="step4info" >
			<b>4. Tillval</b><br/>
			<a id="step4text">todo</a>
			</div>
		</div>
	</body>
</html>